<template>
  <div>
    <van-search
      v-model="value"
      show-action
      @clear="clear"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    >
      <div slot="action" @click="onSearch">搜索</div>
    </van-search>
    <!-- 历史记录区域 -->
    <div v-show="showHistory">
      <van-tag
        closeable
        @close="close(index)"
        @click="search(item)"
        v-for="(item,index) in searchHistory"
        :key="index"
      >{{item}}</van-tag>
    </div>
    <van-cell v-for="item in songList" :key="item.song_id">{{item.songname}}</van-cell>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { search } from "@api/music-api";
// 用户输入内容
// 点击搜索按钮
// 去服务端加载数据
// 把加载好的数据展示出来
export default {
  created() {
    // 在页面刚加载的时候把值从localStorage取出来
    const searchHistoryStr = localStorage.getItem("searchHistory") || "[]";
    this.searchHistory = JSON.parse(searchHistoryStr);
  },
  data() {
    return {
      value: "",
      songList: [],
      searchHistory: [],
      showHistory: true
    };
  },
  methods: {
    clear() {
      this.showHistory = true;
      this.songList = [];
    },
    search(keyword) {
      this.value = keyword;
      this.onSearch();
    },
    onSearch() {
      //   this.$notify(this.value);
      //   Dialog({
      //     title: "搜索",
      //     showCancelButton: true,
      //     message: this.value,
      //     beforeClose(action, done) {
      //       setTimeout(() => {
      //         done();
      //       }, 1000);
      //     }
      //   });
      search(this.value).then(res => {
        if (res.song != null || res.song.length != 0) {
          this.showHistory = false;
        }
        this.songList = res.song;
      });
      // 把关键字放到localSorage中
      // localStorage中存的都是字符串
      // 1. 先从localStorage把搜索历史的列表找到。 null 或 undefined 或者 0 或者 '' 在条件判断都会被认为是false
      const searchHistoryStr = localStorage.getItem("searchHistory") || "[]";
      // 字符串到JSON对象
      const searchHistoryList = JSON.parse(searchHistoryStr);
      // 2. 把我们的关键字放到搜索列表中
      // 如果不在这个数组中才进行push操作
      // 1. 通过includes 2. 通过indexOf判断
      if (!searchHistoryList.includes(this.value)) {
        searchHistoryList.push(this.value);
      }
      this.searchHistory = searchHistoryList;
      // 3. 在把这个搜索列表放回到localstorage中
      // 把对象转成json字符串
      localStorage.setItem("searchHistory", JSON.stringify(searchHistoryList));
    },
    close(index) {
      this.searchHistory.splice(index, 1);
      localStorage.setItem("searchHistory", JSON.stringify(this.searchHistory));
    }
  }

  // 搜索历史的功能
  // localStorage
  // 搜索的时候把输入的关键字放在localStorage中
  // 加载页面的时候把localStorage中的数据取出来展示
};
</script>

<style lang="less" scoped>
</style>